<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">

    <body>
        <ui:composition template="./template.xhtml">

            <ui:define name="title">
                User Detail
            </ui:define>

            <ui:define name="content">
                <f:metadata>
                    <f:viewParam name="userid" value="#{userDetailBean.userid}" />
                </f:metadata>
                <script type="text/javascript">
                    $(document).ready(function(){
                        $('#editu').hide();
                    });
                    $(document).ready(function(){
                        $('#btne').click(function(){
                            $('#editu').show();
                            $('#detail').hide();
                        });
                    });
                    $(document).ready(function(){
                        if($('#fullname').val()==""||$('#phone').val()==""||$('#address').val()==""||$('#email').val()==""){
                            $('#editu').show();
                            $('#detail').hide();
                        }
                    });
                </script>
                <h:form prependId="falses">
                    <div id="detail">
                        <table align="center" width="500px">
                            <tr>
                                <td colspan="2"><h3 align="center">User Detail</h3></td>
                            </tr>
                            <tr>
                                <td colspan="2" align="center"><p:messages id="messages" showDetail="true" autoUpdate="true"  globalOnly="true"/></td>
                            </tr>
                            <tr>
                                <td>Username</td>
                                <td>#{userDetailBean.detail.username}</td>
                            </tr>
                            <tr>
                                <td>Fullname</td>
                                <td>#{userDetailBean.detail.fullname}</td>
                            </tr>
                            <tr>
                                <td>Address</td>
                                <td>#{userDetailBean.detail.address}</td>
                            </tr>
                            <tr>
                                <td>Create Date</td>
                                <td><h:outputText value="#{userDetailBean.detail.createDate}">
                                        <f:convertDateTime pattern="dd/MM/yyy" />
                                    </h:outputText></td>
                            </tr>
                            <tr>
                                <td>Date Of Birth</td>
                                <td><h:outputText value="#{userDetailBean.detail.bod}">
                                        <f:convertDateTime pattern="dd/MM/yyy"  />
                                    </h:outputText></td>
                            </tr>
                            <tr>
                                <td>Email</td>
                                <td>#{userDetailBean.detail.email}</td>
                            </tr>
                            <tr>
                                <td>Gender</td>
                                <td>#{userDetailBean.detail.gender}</td>
                            </tr>
                            <tr>
                                <td>Phone</td>
                                <td>#{userDetailBean.detail.phone}</td>
                            </tr>
                            <tr>
                                <td>Role</td>
                                <td>#{userDetailBean.detail.roleID.roleName}</td>
                            </tr>
                            <tr>
                                <td>Status</td>
                                <td><h:outputText value="#{userDetailBean.detail.status}">
                                        <f:converter converterId="UserStatus" />
                                    </h:outputText></td>
                            </tr>
                            <tr>
                                <td colspan="2" align="center">
                                    <input id="btne" type="button" value="Edit User" />
                                </td>
                            </tr>
                        </table>
                    </div>

                    <div id="editu">
                        <table align="center" width="500">
                            <tr>
                                <td colspan="2"><h2 align="center">Edit User</h2></td><td></td>
                            </tr>
                            <tr>
                                <td>Fullname</td>
                                <td><h:inputText id="fullname" value="#{userDetailBean.fullname}" required="true" requiredMessage="Fullname invalid !" /></td>
                                <td><p:message for="fullname" /></td>
                            </tr>
                            <tr>
                                <td>Address</td>
                                <td><h:inputTextarea id="address" value="#{userDetailBean.address}" required="true" requiredMessage="Address invalid !" /></td>
                                <td><p:message for="address" /></td>
                            </tr>
                            <tr>
                                <td>Date Of Birth</td>
                                <td><p:calendar id="bod" value="#{userDetailBean.bod}" navigator="true" showButtonPanel="true" required="true" requiredMessage="Select date !" /></td>
                                <p:message for="bod" />
                            </tr>
                            <tr>
                                <td>Email</td>
                                <td><h:inputText value="#{userDetailBean.email}" id="email" required="true" requiredMessage="Email invalid !" validatorMessage="Email invalid !">
                                        <f:validateRegex pattern="[\w\.-]*[a-zA-Z0-9_]@[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]" />
                                    </h:inputText></td>
                                <td><p:message for="email" /></td>
                            </tr>
                            <tr>
                                <td>Gender</td>
                                <td><h:selectOneMenu value="#{userDetailBean.gender}">
                                        <f:selectItem itemValue="Male" itemLabel="Male"/>
                                        <f:selectItem itemValue="FeMale" itemLabel="FeMale" />
                                    </h:selectOneMenu></td>
                            </tr>
                            <tr>
                                <td>Phone</td>
                                <td><h:inputText value="#{userDetailBean.phone}" id="phone" required="true" requiredMessage="Phone invalid !" /></td>
                                <td><p:message for="phone" /></td>
                            </tr>
                            <tr>
                                <td>Role</td>
                                <td><h:selectOneMenu value="#{userDetailBean.role}">
                                        <f:selectItems value="#{userDetailBean.roles}" var="r" itemLabel="#{r.roleName}" itemValue="#{r.roleID}" />
                                    </h:selectOneMenu></td>
                            </tr>
                            <tr>
                                <td colspan="2" align="center">
                                    <h:commandButton id="btnedituser" value="Change User" action="#{userDetailBean.editUser}"  />
                                </td>
                            </tr>
                        </table>
                    </div>
                </h:form> 
            </ui:define>

        </ui:composition>

    </body>
</html>
